<script setup>
import {onBeforeMount, ref} from "vue";
import {getRemarksByArticleId, saveRemark} from "@/api/request.js";
import {useUserStore} from "@/store/user.js";
import axios from "axios";

const store = useUserStore()
const props = defineProps({
  articleId: {
    type: Number,
    required: true
  }
})

const articleId = ref(props.articleId)


const displayedRemarks = ref([])

// 评论列表
const remarkContent = ref('')

// 组件创建时获取评论列表
onBeforeMount(async () => {
      await getRemarksByArticleId({
        articleId: articleId.value
      }).then(res => {
        if (res.data !== null) {
          displayedRemarks.value = res.data
        } else {
          displayedRemarks.value = []
        }
        console.log("displayRemarks => ", displayedRemarks.value)
      }).catch(err => {
        console.log(err)
      })
    }
)

// 点击发送评论
const onClickSendRemark = () => {
  if (remarkContent.value === '') {
    return false
  }
  // 发送评论
  saveRemark({
    remark: {
      content: remarkContent.value,
      userId: store.userId,
      articleId: articleId.value
    }
  }).then(res => {
    displayedRemarks.value.push(res.data)
  }).catch(err => {
    console.log(err)
  })
}

</script>

<template>
  <div class="remark-box">
    <div class="statistics">{{ displayedRemarks.length }} 条评论</div>
    <div class="show-remark-box">
      <van-empty v-if="displayedRemarks.length === 0" description="没有人评论" image="network" image-size="5rem"/>
      <template v-for="item in displayedRemarks">
        <div class="remark">
          <div class="right">
            <van-image :src="`${axios.defaults.baseURL}/${item.user.avatar}`" alt="" fit="cover" height="2rem"
                       round width="2rem"></van-image>
          </div>
          <div class="left">
            <div class="username">{{ item.user.username }}</div>
            <div class="remark-content">{{ item.remark.content }}</div>
            <div class="time"><small>{{ item.remark.createTime }}</small></div>
          </div>
        </div>
      </template>
    </div>

    <div class="write-remark">
      <van-cell-group inset>
        <van-field v-model="remarkContent" placeholder="请输入评论信息">
          <template #button>
            <van-button size="small" type="primary" @click="onClickSendRemark">发送</van-button>
          </template>
        </van-field>
      </van-cell-group>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.remark-box {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .statistics {
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
  }

  .show-remark-box {
    flex: 1;
    overflow: auto;
    box-sizing: border-box;

    .remark {
      width: 100%;
      padding: 1rem;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;

      .right {
        padding: 0 0.5rem;
      }

      .left {
        flex: 1;
        padding: 0 0.5rem;

        .username {
          font-size: 0.75rem;
          color: #999;
          margin-bottom: 0.5rem;
        }

        .time {
          font-size: 0.6rem;
          color: #999;
          margin-top: 0.5rem;
        }

        .remark-content {
          font-size: .85rem;
          line-height: 1.5;
        }
      }

      & + .remark {
        margin-top: 1rem;
      }
    }
  }

  .write-remark {
    height: 3rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
  }
}
</style>